<template>
  <footer class="footer">
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item v-for="item in tabars" :key="item.path" :icon="item.ico" :to="item.path">{{item.name}}</van-tabbar-item>
    </van-tabbar>
  </footer>
</template>

<script>
export default {
  created(){
    console.log(this.$route.path)
    if(this.$route.path==='/index/home'){
      this.active=0
    }else if(this.$route.path==='/index/cates'){
      this.active=1
    }else if(this.$route.path==='/index/shop'){
      this.active=2
    }else{
      this.active=3
    }
  },
  props: {
    tabars: {
      type: Array,
    },
  },
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style scoped>
.footer {
  position: fixed;
  width: 100vw;
  height: 0.4rem;
  border-top: 1px solid #ccc;
  display: flex;
  bottom: 0;
  left: 0;
  padding-top: 0.05rem;
}
.footer span {
  font-size: 0.14rem;
  flex: 1;
  /* background: red; */
  color: #333;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.iconfont {
  font-size: 0.25rem;
}
.footer .active {
  color: red;
}
</style>